<template>
  <div>
    <!-- 菜单 @open="handleOpen"-->
    <el-menu :default-active="$route.path" :router="true"  @select="handleSelect">
        <!-- 仪表盘 -->
        <el-sub-menu index="1">
            <template #title>
                <img style="width: 1.25rem;height: 1.25rem;margin-left: -0.8rem;" src="../assets/img/icon/menu1.png" />
                <span style="margin-left: 0.3rem;">{{$t('目录.仪表盘')}}</span>
            </template>
            <el-menu-item-group>
                <el-menu-item index="/panel/work">{{$t('目录.工作台')}}</el-menu-item>
            </el-menu-item-group>
        </el-sub-menu>
<!--        <el-sub-menu index="2">-->
<!--            <template #title>-->
<!--                <img style="width: 1.25rem;height: 1.25rem;margin-left: -0.8rem;" src="../assets/img/icon/menu5.png" />-->
<!--                <span style="margin-left: 0.3rem;font-family: AlibabaPuHui-medium;width: 138px;">{{$t('目录.市场洞察1')}}</span>-->
<!--            </template>-->
<!--            <el-menu-item-group>-->
<!--                <el-menu-item index="/panel/rank">{{$t('热销TOP100')}}</el-menu-item>-->
<!--                <el-menu-item index="/panel/rank_1">{{$t('增长率TOP100')}}</el-menu-item>-->
<!--            </el-menu-item-group>-->
<!--        </el-sub-menu>-->
        <el-sub-menu index="3">
            <template #title>
                <img style="width: 1.25rem;height: 1.25rem;margin-left: -0.8rem;" src="../assets/img/icon/menu3.png" />
                <span style="margin-left: 0.3rem;">{{$t('目录.temu数据分析')}}</span>
            </template>
            <el-menu-item-group>
                <el-menu-item index="/panel/rank2">{{$t('目录.热销商品')}}</el-menu-item>
                <el-menu-item index="/panel/rank2_1">{{$t('目录.日销排行')}}</el-menu-item>
                <el-menu-item index="/panel/rank2_2">{{$t('目录.热销新品')}}</el-menu-item>
<!--                <el-menu-item index="/panel/rank2_3">{{$t('目录.新店热销')}}</el-menu-item>-->
            </el-menu-item-group>
        </el-sub-menu>
        <el-sub-menu index="4">
            <template #title>
                <img style="width: 1.25rem;height: 1.25rem;margin-left: -0.8rem;" src="../assets/img/icon/menu3.png" />
                <span style="margin-left: 0.3rem;">{{$t('目录.订阅')}}</span>
            </template>
            <el-menu-item-group>
                <el-menu-item index="/subscribe/price">{{$t('目录.定价计划')}}</el-menu-item>
                <el-menu-item index="/subscribe/reserve">{{$t('目录.订阅记录')}}</el-menu-item>
            </el-menu-item-group>
        </el-sub-menu>
        <el-sub-menu index="5" v-if="isLogin">
            <template #title>
                <img style="width: 1.25rem;height: 1.25rem;margin-left: -0.8rem;" src="../assets/img/icon/menu4.png" />
                <span style="margin-left: 0.3rem;">{{$t('目录.设置')}}</span>
            </template>
            <el-menu-item-group>
                <el-menu-item index="/setting/mine" >{{$t('目录.个人设置')}}</el-menu-item>
                <el-menu-item index="/setting/password">{{$t('目录.密码设置')}}</el-menu-item>
                <!-- <el-menu-item index="/setting/pay" @click="navigate('/setting/pay')">支付设置</el-menu-item> -->
            </el-menu-item-group>
        </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup>
// import { useRouter } from 'vue-router';
import {ref} from 'vue'
// const route = useRoute();
// const router = useRouter();
// const current = ref('/panel/work')
// const navigate = (url)=>{
//     router.push({
//         path:url
//     })
// }
const isLogin = ref(false)
// 取token 判断是否是登录状态
const token = localStorage.getItem('token')
isLogin.value = !!token;
// const handleOpen = (key,keyPath)=>{
//     console.log(key, keyPath)
// }
const handleSelect =(key,keyPath)=>{
    console.log(key, keyPath)
    // if(current.value !== key){
    //     current.value = key
    // }
}

</script>

<style lang="scss" scoped>

</style>